<template>
	<view :class="{'fui-loading__mask':(isMask || isNvue) && isFixed}"
		:style="{backgroundColor:isFixed?maskBgColor:'transparent'}">
		<view class="fui-loading fui-loading__wrap" :class="{'fui-loading__fixed':isFixed && !isNvue}"
			:style="{ backgroundColor: backgroundColor,position:isFixed && !isNvue?'fixed':'static' }"
			v-if="type === 'col'">
			<image ref="fui_loading" class="fui-loading__ani" :src="srcCol"></image>
			<text class="fui-loading__text"
				:style="{color:colColor,fontSize:size+'rpx','line-height':size+'rpx'}">{{ text }}</text>
		</view>
		<view v-else class="fui-loading fui-loading__row" :class="{'fui-loading__fixed':isFixed && !isNvue}"
			:style="{position:isFixed && !isNvue?'fixed':'static'}">
			<!-- <loading-indicator :animating="true"></loading-indicator> -->
			<image ref="fui_loading" class="fui-loading-row__ani" :src="srcRow"></image>
			<text class="fui-loading__text"
				:style="{color:rowColor,fontSize:size+'rpx','line-height':size+'rpx'}">{{ text }}</text>
		</view>
	</view>
</template>

<script>
	// #ifdef APP-NVUE
	const animation = uni.requireNativePlugin('animation');
	// #endif
	export default {
		name: "fui-loading",
		props: {
			//col、row
			type: {
				type: String,
				default: 'col'
			},
			//提示文字
			text: {
				type: String,
				default: '加载中'
			},
			//文本颜色，type=col时生效
			colColor: {
				type: String,
				default: '#FFFFFF'
			},
			//文本颜色，type=row时生效
			rowColor: {
				type: String,
				default: '#7F7F7F'
			},
			//字体大小，单位rpx
			size: {
				type: [Number, String],
				default: 26
			},
			//loading背景色，type=col时生效
			backgroundColor: {
				type: String,
				default: 'rgba(0, 0, 0, 0.6)'
			},
			//loading icon图片地址，type=col时生效
			srcCol: {
				type: String,
				default: ''
			},
			//loading icon图片地址，type=row时生效
			srcRow: {
				type: String,
				default: ''
			},
			isFixed: {
				type: Boolean,
				default: true
			},
			//是否需要遮罩，非nvue有效，nvue默认带遮罩，isFixed为true时生效
			isMask: {
				type: Boolean,
				default: false
			},
			//v1.9.9+
			maskBgColor: {
				type: String,
				default: 'transparent'
			}
		},
		data() {
			let isNvue = false;
			// #ifdef APP-NVUE
			isNvue = true;
			// #endif
			return {
				isNvue: isNvue,
				// #ifdef APP-NVUE
				deg: 0,
				stop: false
				// #endif
			}
		},
		// #ifdef APP-NVUE
		mounted() {
			this.$nextTick(() => {
				setTimeout(() => {
					this.deg += 360;
					this._animation()
				}, 50)
			})
		},
		// #endif
		//nvue暂不支持vue3，所以不需要做兼容,此处以防后续兼容
		// #ifdef APP-NVUE
		// #ifndef VUE3
		beforeDestroy() {
			this.deg = 0;
			this.stop = true;
		},
		// #endif
		// #ifdef VUE3
		beforeUnmount() {
			this.deg = 0;
			this.stop = true;
		},
		// #endif
		// #endif
		methods: {
			// #ifdef APP-NVUE
			_animation() {
				if (!this.$refs['fui_loading'] || this.stop) return;
				animation.transition(
					this.$refs['fui_loading'].ref, {
						styles: {
							transform: `rotate(${this.deg}deg)`
						},
						duration: 800, //ms
						timingFunction: 'linear',
						iterationCount: 'infinite',
						needLayout: false,
						delay: 0 //ms
					}, () => {
						this.deg += 360;
						this._animation()
					}
				);
			}
			// #endif
		}
	}
</script>

<style scoped>
	.fui-loading {
		/* #ifndef APP-NVUE */
		display: flex;
		margin: 0 auto;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.fui-loading__fixed {
		/* #ifndef APP-NVUE */
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* #endif */
		z-index: 1008;
	}

	.fui-loading__wrap {
		width: 208rpx;
		height: 208rpx;
		flex-direction: column;
		border-radius: 12rpx;
	}

	.fui-loading__ani {
		width: 64rpx;
		height: 64rpx;
		margin: 0 6px;
		/* #ifndef APP-NVUE */
		animation: rotate 0.85s linear infinite;
		/* #endif */
		margin-bottom: 30rpx;
	}

	.fui-loading__row {
		flex: 1;
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		height: 36rpx;
	}

	.fui-loading-row__ani {
		width: 36rpx;
		height: 36rpx;
		/* #ifdef APP-NVUE */
		border-radius: 36rpx;
		/* #endif */
		/* #ifndef APP-NVUE */
		display: block;
		border-radius: 50%;
		animation: rotate 0.85s linear infinite;
		/* #endif */
		margin-right: 20rpx;
	}

	.fui-loading__text {
		text-align: center;
	}

	/* #ifndef APP-NVUE */
	@-webkit-keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* #endif */
	.fui-loading__mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1002;

		/* #ifdef APP-NVUE */
		align-items: center;
		justify-content: center;
		/* #endif */
	}
</style>